<template>
    <van-cell is-link :title="address + title + codeId" @click="goSelectAreaCode" />
    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field v-model="username" name="username" placeholder="请输入手机号" type="text"
                :rules="[{ required: true, message: '请填写用户名' }, { pattern, message: '账号请输入5-12字符' }]" />
            <van-field v-model="phonecode" type="text" name="phonecode" placeholder="请输入手机验证码"
                :rules="[{ required: true, message: '请填写密码' }, { pattern: patternCode, message: '验证码请输入4位字符' }]" />
        </van-cell-group>
        <div style="margin: 16px;"> <van-button round block type="primary" native-type="submit" square :disabled="flag">
                确定
            </van-button>
        </div>
    </van-form>
    <div class="read-consent"><span>点击确定，即表示阅读并同意</span><span @click="goRegistrationTerms">
            &lt;&lt;注册会员服务条款&gt;&gt;</span></div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router'
import {getLogin} from '@/api/login/login'
const router = useRouter()
const username = ref('');
const phonecode = ref('');
const onSubmit =async (values) => {
    console.log('submit', values);
};

const flag = computed(() => {
    return !patternCode.test(phonecode.value)
})

const pattern = /\w{5,12}/;
const patternCode = /\w{4}/;

//去条款页面
const goRegistrationTerms = () => {
    router.push({ path: '/registrationterms' })
}
const goSelectAreaCode = () => {
    router.push({ path: '/areacode' })
}

//选择区号
const address = ref('选择国家/地区')
const codeId = ref('+86')
const title = ref('中国')
onMounted(() => {

    setCode()
    getLogins()
})

const setCode = ()=>{
     if (localStorage.getItem('codeId') && localStorage.getItem('title')) {
        codeId.value = localStorage.getItem('codeId')
        title.value = localStorage.getItem('title')
    }
}




const getLogins = async()=>{
// let res =  await getLogin({username:'zqj',password:'12345678'})
// console.log(res)
}




</script>

<style lang="scss" scoped>

.van-form{
    margin-top: 20px;
}
.van-button {
    border-radius: 10px;
}


.read-consent {
    font-size: 12px;
    text-align: center;

}

.read-consent span:nth-last-of-type(1) {
    color: green;
}
</style>
